import Root, { connect } from "../components/Root";
import {
  Avatar,
  Breadcrumb,
  Divider,
  Dropdown,
  Icon,
  Layout,
  Menu,
  Modal
} from "antd";


const { Header, Content, Footer } = Layout;
const MenuItem = Menu.Item;
const BreadItem = Breadcrumb.Item;

const ACTION_URI = "router/changeMenu";

@connect(({ login, menuRouter, loading }) => ({
  ...menuRouter,
  user: login.info,
  loading: loading.effects[ACTION_URI]
}))
export default class Main extends Root {
  state = {
    user: sessionStorage.getItem("info")
      ? JSON.parse(sessionStorage.getItem("info"))
      : {},
    visible: false,
    collapsed: false,
    currMenus: [],
    contentView: undefined
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };
  /**
   * 账户菜单事件
   * @param {*} param item, key, keyPath
   */
  onHeaderClick({ item, key, keyPath }) {
    // let route = {};
    switch (key) {
      case "logout":
        Modal.confirm({
          title: `退出当前[${this.state.user.nickName}]账号?`,
          onOk: () => this.props.dispatch({ type: "login/doLogout" })
        });
        break;
      default:
    }
  }
  render() {
    return (
      <Layout
        style={{
          width: "100%",
          height: "100%",
          position: "fixed",
          left: 0
        }}
      >
        <Layout>
          {this.getHeader()}
          <Divider style={{ height: 1, margin: 0 }} />
          <Breadcrumb style={{ margin: 24 }}>
            <BreadItem>
              <Icon type="home" />
              <span>后台管理</span>
            </BreadItem>
            {this.props.currMenus.map(item => (
              <BreadItem key={item.id}>
                <span>{item.menuName}</span>
              </BreadItem>
            ))}
          </Breadcrumb>
          {this.getContent()}
          {this.getFooter()}
        </Layout>
      </Layout>
    );
  }

  /**
   * 初始化Top区域
   * Init Header
   */
  getHeader() {
    // 下拉
    const personMenus = (
      <Menu onClick={this.onHeaderClick.bind(this)}>
        <MenuItem key="0">
          <Icon type="user" />
          个人中心
        </MenuItem>
        <MenuItem key="1">
          <Icon type="unlock" />
          修改密码
        </MenuItem>
        <MenuItem key="2">
          <Icon type="setting" />
          设置
        </MenuItem>
        <Divider
          style={{
            margin: 0,
            height: "1px"
          }}
        />
        <MenuItem key="logout" rel="noopener noreferrer">
          <Icon type="poweroff" />
          注销
        </MenuItem>
      </Menu>
    );
    return (
      <Header
        style={{
          height: "64px",
          background: "#fff",
          padding: "0 12px 0 0",
          boxShadow: "0 1px 4px rgba(0,21,41,.08)"
        }}
      >
        <Icon
          type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
          onClick={this.toggle}
          style={{
            display: "inline-block",
            fontSize: 20,
            lineHeight: "64px",
            cursor: "pointer",
            transition: "all 0.3s, padding 0s",
            padding: "0 24px"
          }}
        />
        <Dropdown placement="bottomRight" overlay={personMenus}>
          <span
            style={{
              float: "right",
              cursor: "pointer",
              padding: "0 12px",
              display: "inline-block",
              transition: "all 0.3s",
              height: "100%"
            }}
          >
            <Avatar
              icon="user"
              shape="square"
              size={35}
              style={{
                backgroundColor: "#FEC107"
              }}
            />
            <span style={{ fontSize: "16px", height: "100%", padding: "10px" }}>
              {this.state.user.nickName}
            </span>
          </span>
        </Dropdown>
      </Header>
    );
  }
  /**
   * 初始化内容区
   * Init Contents
   */
  getContent() {
    return (
      <Content
        style={{
          flex: 1,
          margin: "0 24px",
          padding: "0 24px",
          background: "#fff"
        }}
      >
        {this.props.contentView}
      </Content>
    );
  }
  getFooter() {
    return (
      <Footer style={{ textAlign: "center" }}>
        EDF-MGR ©{new Date().getFullYear()} Created by 三行云智
      </Footer>
    );
  }
}
